<template>
  <div class="app-container department-notification">
    <!-- 在这里添加组件的模板内容 -->
    <div class="content-box">
      <el-form ref="searchForm" :model="searchForm" label-width="100px">
        <el-row :gutter="24" class="search-form">
          <el-col :span="9">
            <el-form-item label="发布时间:" prop="name" class="form-item">
              <el-date-picker
                style="width: 100%"
                v-model="searchForm.time"
                type="daterange"
                size="mini"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布人:" prop="userNo" class="form-item">
              <el-input
                v-model="searchForm.userNo"
                size="mini"
                @keyup.enter.native="fetchData"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5" class="form-button-box">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              class="pan-btn green-btn"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-refresh"
              class="pan-btn green-btn"
              @click="resetForm"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content-new-add">
      <el-button
        size="small"
        icon="el-icon-plus"
        class="pan-btn green-btn"
        type="primary"
        @click="handleOpenEditDialog(MODAL_TYPE.ADD)"
        >新增</el-button
      >
    </div>
    <div>
      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          label="通知编号"
          min-width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="通知类型"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="publisher"
          label="发布人"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="publishTime"
          label="发布时间"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="操作列" min-width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="handleOpenEditDialog(MODAL_TYPE.LOOK, scope.row)"
              >查看</el-button
            >
            <!-- 在这里添加其他操作按钮，例如：编辑、删除等 -->
            <el-button @click="handleOpenEditDialog(MODAL_TYPE.EDIT, scope.row)"
              >编辑</el-button
            >
            <el-button @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="content-box" style="text-align: center">
        <my-pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="searchForm.pageIndex"
          :limit.sync="searchForm.pageSize"
          @pagination="handleSearch"
        />
      </div>
    </div>
    <editDialog ref="editDialog"></editDialog>
  </div>
</template>
<script>
import editDialog from "./components/editDialog";
import { MODAL_TYPE } from "./config.js";
/* import {
  addNotification,
  updateNotification,
  deleteNotification,
  getNotifications,
} from "../api/notification"; */

export default {
  name: "DepartmentNotification",
  components: {
    editDialog,
  },
  data() {
    // 在这里初始化组件的本地数据，可以根据需要进行自定义
    return {
      tableLoading: false,
      MODAL_TYPE,
      searchForm: {
        time: this.getTime(),
        userNo: "",
        pageIndex: 1,
        pageSize: 10,
      },
      pageTotal: 2,
      tableData: [
        {
          id: 1,
          title: "通知标题1",
          type: "通知类型1",
          publisher: "发布人1",
          publishTime: "2023-07-18T15:30:00",
          action: "操作列1",
        },
        {
          id: 2,
          title: "通知标题2",
          type: "通知类型2",
          publisher: "发布人2",
          publishTime: "2023-07-19T16:30:00",
          action: "操作列2",
        },
      ],
    };
  },
  mounted() {
    // 在组件挂载后执行的代码，例如加载数据或进行初始化操作
    this.handleSearch();
  },
  methods: {
    /**
     * 查看 编辑 新增 打开弹窗
     * @params modalType 弹窗类型
     * @params row 表格数据
     */
    handleOpenEditDialog(modalType, row) {
      this.$refs.editDialog.open({
        modalType,
        row: row ? JSON.parse(JSON.stringify(row)) : "", //深拷贝一份避免数据影响
      });
    },
    handleDelete(row) {
      console.log(row, "row--");
      this.$confirm("此操作将永久删除该通知, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          /* deleteNotification(row.id)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((err) => {
              console.log(err);
            }); */
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSearch() {
      //this.tableLoading = true;
      // getNotifications(this.searchForm)
      //     .then(response => {
      //       this.tableData = response.data;
      //       this.pageTotal = response.data.pageTotal;
      //       this.tableLoading = false;
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
    },
    resetForm() {
      this.searchForm.time = "";
      this.searchForm.userNo = "";
    },
    //获取当前时间，1天前
    getTime() {
      /* let ethat = new Date();
      let sdate = this.$help.utils.formatTime(
        ethat.setDate(ethat.getDate() - 1),
        "yyyy-MM-dd"
      );
      let edate = this.$help.utils.formatTime(new Date(), "yyyy-MM-dd");
      return [sdate, edate]; */
      return [new Date(), new Date()];
    },
  },
};
</script>

<style lang="scss" scoped>
.department-notification {
  height: 100%;
  display: unset;
  /* 这里添加组件的样式 */
  .content-new-add {
    margin: 15px 0;
    height: 35px;
  }
  .help-notice-view {
    min-height: 300px;
    max-height: 500px;
    .w-e-toolbar {
      display: none !important;
    }
    .w-e-text-container {
      border: none !important;
    }
  }
  .help-notice-view-title {
    cursor: pointer;
    i {
      opacity: 0;
    }
    &.red {
      font-weight: bold;
      i {
        color: red;
        opacity: 1;
      }
    }
  }
}
</style>
